Make project extendable with new angular components

Missing:

• npm install --save @angular/cli to use ng g command
• angular.json cli configuration file as created by ng new

Error:

When adding a new component the corresponding html-file is not found in dev-mode. To Reproduce:

• Create new component with ng g component test
• start server with npm run dev

See Error in Console:

GET http://127.0.0.1:4200/test.component.html 404 (Not Found)

Hi @joov

Thanks you for reporting this issues, we are kind of aware of it. The problem is that in the file test.component.ts you have to load template file through webpack in order to load the file in the app (Look at the demo component)

We are working on a solution to fix this and use the angular native notation

I have come across the fact that it is required to load Angular template and stylesheet files using the require(...) command having inside its brackets the file path. In my project I solved this issue by developing a very simple WebPack loader which I have attached before the ts-loader loader in the webpack.config.js file. The source of the loader I show below: ` function preprocessTemplate(source) { return source.replace(/(['"](.*)\.component\.html['"])/g, "require($&)"); }

function preprocessStylesheet(source) { return source.replace(/(['"](.*)\.component\.css['"])/g, "require($&)"); }

module.exports = function(source) { return preprocessTemplate(preprocessStylesheet(source)); } ` It basically converts the filenames into the require command and then as it is passed into the ts-loader the templates and stylesheets become the part of the Webpack dependency graph. I hope this solution might become handy.

Thanks you @evonox ! I had in mind to fix this issue with something similar but didn't find any time to do it 😞

We'll implement this fix as soon as we may !

@lbassin How can we use styles that are loaded on angular.json file?