preboot/angular-webpack

not working with Angular5

athempeed opened this issue ยท 4 comments

Hi tried to use the same file structure for angular 5. but somehow it is not working.

firstly the issue came with the html files for the components. I used this code:
@component({
selector: 'my-app', //
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})

but it was saying the app.component.html is not found.

I searched a little bit and come across with some articles which was saying that we need to use relative path so I used this code after that:
@component({
selector: 'my-app', //
templateUrl: require('./app.component.html'),
styleUrls: [require('./app.component.scss')],
})

but now I am getting another error and the error is ๐Ÿ‘
"Maximum call stack size exceeded"

description:
footer>
:11 ERROR RangeError: Maximum call stack size exceeded
at callWithDebugContext (core.js?593e:15046)
at Object.debugCreateComponentView [as createComponentView] (core.js?593e:14368)
at createViewNodes (core.js?593e:13690)
at callViewAction (core.js?593e:14159)
at execComponentViewsAction (core.js?593e:14068)
at createViewNodes (core.js?593e:13753)
at callViewAction (core.js?593e:14159)
at execComponentViewsAction (core.js?593e:14068)
at createViewNodes (core.js?593e:13753)
at callViewAction (core.js?593e:14159)
at execComponentViewsAction (core.js?593e:14068)
at createViewNodes (core.js?593e:13753)
at callViewAction (core.js?593e:14159)
at execComponentViewsAction (core.js?593e:14068)
at createViewNodes (core.js?593e:13753).......

please if you people can help me out on this.

repo for my code is : https://github.com/Donjay2101/Angualr5

thanks in advance

Hello! This repo is outdated and so using code from here with a newer version of Angular will almost positively break with newer version of Angular - it hasn't been updated in favor of using Angular CLI.

I would highly suggest using Angular CLI to create, serve, build, and add things to your application. It will bootstrap and take care of all the webpack, tooling, and best practices and let you just write your Angular app. Below is a simple overview of how you can get started in less than 5 minutes using the CLI:

  1. npm i -g @angular/cli - Installs Angular CLI globally on your computer
  2. ng new my-project-name - Creates a new Angular project named "my-project-name", installs npm dependencies automatically for you
  3. cd my-project-name - cd into the project that was created
  4. ng serve - Serve the project on http://localhost:4200

Then, after you've got your project going, you can easily add new components, services, etc:

ng g component my-new-component Creates a new component with all of the files/structures you need in your project.

See the repository https://github.com/angular/angular-cli (linked above as well) for more information and better docs.

Even I have moved to the angular-cli .. it's pretty sweet these days.

Even I have moved to the angular-cli .. it's pretty sweet these days.

Yeah, plus if you want to do "your own thing" you can still start out with the CLI and then just "eject" it so that you can manage your own stuff (I don't do this lol)

Thanks for the reply to you guys. yes you people are correct its old one I created the new web.config.js file and then it worked fine.
this is the working repo: https://github.com/Donjay2101/Angualr5
Thanks for the help guys.