Move project from SystemJS to Angular CLI / Webpack

Question

I have a project which I have created using Angular 2 + SystemJS. Not I want to switch to Angular CLI + Webpack. Is there are recommended way to do it ?

Answer 1

I would scaffold an empty project using the Angular CLI, and then move my code over from the SystemJS based project into the Angular CLI based one. Depending on the size of the project and how interconnected things are, this could be a simple copy of the app or src folder, or could be a long affair.

Overall, SystemJS and the Angular CLI are (more or less) build tools and shouldn't be referenced in the actual application code, so the hardest part should be getting the configuration of the new Angular CLI project right. How difficult that is depends on how complicated your SystemJS configuration is.

In your shoes, I'd try copying the whole src folder first and seeing if everything runs and if not, then try moving things piecemeal from there.

Things to pay particular attention to:

• package.json - this is very likely to be different between the two projects. If possible, it may make more sense to update your SystemJS project to use as many of the same versions of npm packages as possible before the migration. You'll have to use judgement as to how far to go with this

• tsconfig.json - same story - although this can be safer to change on the Angular CLI side to match your SystemJS configuration

Answer 2

• Make Changes In package.json in scripts remove everything related to tsc and only keep replace it with build : webpack and start : webpack-dev-server.
• In dev dependencies keep only typescript : version and ts-loader : version.
• npm install
• next change tsconfig.json module : commonjs.
• add webpack.config.js .
• npm run build

• remove systemjs content from index.html -Include bundle.js in your index.html.

  -npm start

Video Reference Here

thats how you go from system.js to webpack for CLI i think installing CLI after this should work fine but I am not sure.