New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): add webpack update instructions #1456

Merged
merged 1 commit into from Aug 3, 2016

Conversation

Projects
None yet
10 participants
@filipesilva
Member

filipesilva commented Jul 26, 2016

Blocked by #1455 and angular-cli@webpack release. This PR should not be merged before we do a release, as there are more changes that can happen meanwhile.

Things that need to be incorporated into the guide:

  • mention that existing sass/etc files need to be renamed in styleUrls to include their real suffix, in beta.10 we were always using .css suffix in the array.
  • mobile app upgrade instructions
@hansl

This comment has been minimized.

Show comment
Hide comment
@hansl

hansl Jul 27, 2016

Collaborator

LGTM.

Collaborator

hansl commented Jul 27, 2016

LGTM.

Show outdated Hide outdated WEBPACK_UPDATE.md
@intellix

This comment has been minimized.

Show comment
Hide comment
@intellix

intellix Jul 27, 2016

Contributor

Also another note. Even if I do this for a new project, ng serve gives me:

No angular-cli-build.js found. Please see the transition guide: https://github.com/angular-cli/angular-cli/blob/master/TRANSITION.md#user-content-brocfile-transition.

I believe this is because addon/ng2/blueprints/ng2/files/package.json ends up referencing angular-cli@1.0.0-beta.10. (I did the install using an npm linked angular-cli on webpack branch as well)

Contributor

intellix commented Jul 27, 2016

Also another note. Even if I do this for a new project, ng serve gives me:

No angular-cli-build.js found. Please see the transition guide: https://github.com/angular-cli/angular-cli/blob/master/TRANSITION.md#user-content-brocfile-transition.

I believe this is because addon/ng2/blueprints/ng2/files/package.json ends up referencing angular-cli@1.0.0-beta.10. (I did the install using an npm linked angular-cli on webpack branch as well)

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Jul 27, 2016

Member

@intellix at the moment we haven't yet done the webpack release mentioned in the instructions so you're basically just running with master, so the following instructions apply:

https://github.com/angular/angular-cli#development-hints-for-hacking-on-angular-cli

There's a shortcut you can use as well, ng new --link-cli, which will do the linking for you.

Member

filipesilva commented Jul 27, 2016

@intellix at the moment we haven't yet done the webpack release mentioned in the instructions so you're basically just running with master, so the following instructions apply:

https://github.com/angular/angular-cli#development-hints-for-hacking-on-angular-cli

There's a shortcut you can use as well, ng new --link-cli, which will do the linking for you.

@filipesilva filipesilva deleted the filipesilva:webpack-update-instructions branch Jul 27, 2016

@filipesilva filipesilva restored the filipesilva:webpack-update-instructions branch Jul 27, 2016

@filipesilva filipesilva reopened this Jul 27, 2016

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Jul 27, 2016

Member

(closed by accident)

Member

filipesilva commented Jul 27, 2016

(closed by accident)

Show outdated Hide outdated WEBPACK_UPDATE.md
* `./config/karma-test-shim.js`
* `./src/system-config.ts`
* `./angular-cli-build.js`
* `./typings.json`

This comment has been minimized.

@Brocco

Brocco Jul 28, 2016

Contributor

Other possible file that can be deleted if present:

  • .clang-format
@Brocco

Brocco Jul 28, 2016

Contributor

Other possible file that can be deleted if present:

  • .clang-format

This comment has been minimized.

@filipesilva

filipesilva Jul 28, 2016

Member

Added.

@filipesilva
@elvirdolic

This comment has been minimized.

Show comment
Hide comment
@elvirdolic

elvirdolic Jul 29, 2016

If you use sass. You have also to rename your css files to .scss or .sass in templateUrl otherwise It won't be picked up and an error message is shown.

elvirdolic commented Jul 29, 2016

If you use sass. You have also to rename your css files to .scss or .sass in templateUrl otherwise It won't be picked up and an error message is shown.

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Jul 29, 2016

Member

@elvirdolic good point. I'll add that to a list on the first comment so that it's updated before the release.

Member

filipesilva commented Jul 29, 2016

@elvirdolic good point. I'll add that to a list on the first comment so that it's updated before the release.

Show outdated Hide outdated WEBPACK_UPDATE.md
Show outdated Hide outdated WEBPACK_UPDATE.md
Show outdated Hide outdated WEBPACK_UPDATE.md
Show outdated Hide outdated WEBPACK_UPDATE.md
Show outdated Hide outdated WEBPACK_UPDATE.md
You can find a sample github diff of the changes introduced between a beta.10 and webpack preview project at https://github.com/filipesilva/angular-cli-webpack-upgrade/commit/HEAD.
Here is a summary of the file changes:

This comment has been minimized.

@hansl

hansl Aug 3, 2016

Collaborator

Separate this into 5 groups: Unit tests, E2E tests, App code / Components, Project Config, and App Config.

Example:


Unit Tests

Karma Configuration

  • Introduced an angular-cli karma plugin to help us integrate with karma. To add this plugin, replace your frameworks and plugins entries in your karma config by these:
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-coverage'),
      require('angular-cli/plugins/karma')
    ],
  • Note that we also added karma-coverage to handle coverage reporting. If you don't want coverage, you can safely remove it.
  • Removed all the files entries. We only need to link the entry point for testing, which is test.ts. Replace your files entry by:
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
  • We need to add a preprocessor for the file, as it will be handled by the angular-cli plugin:
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
@hansl

hansl Aug 3, 2016

Collaborator

Separate this into 5 groups: Unit tests, E2E tests, App code / Components, Project Config, and App Config.

Example:


Unit Tests

Karma Configuration

  • Introduced an angular-cli karma plugin to help us integrate with karma. To add this plugin, replace your frameworks and plugins entries in your karma config by these:
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-coverage'),
      require('angular-cli/plugins/karma')
    ],
  • Note that we also added karma-coverage to handle coverage reporting. If you don't want coverage, you can safely remove it.
  • Removed all the files entries. We only need to link the entry point for testing, which is test.ts. Replace your files entry by:
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
  • We need to add a preprocessor for the file, as it will be handled by the angular-cli plugin:
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
@hansl

This comment has been minimized.

Show comment
Hide comment
@hansl

hansl Aug 3, 2016

Collaborator

I still have pretty strong comments about the structure of this document, but if you insist on getting this in first and then working on incremental updates I'm fine with its state right now.

Collaborator

hansl commented Aug 3, 2016

I still have pretty strong comments about the structure of this document, but if you insist on getting this in first and then working on incremental updates I'm fine with its state right now.

@filipesilva filipesilva merged commit 5ea4b03 into angular:master Aug 3, 2016

3 checks passed

cla/google All necessary CLAs are signed
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@filipesilva filipesilva deleted the filipesilva:webpack-update-instructions branch Aug 3, 2016

@wouterkirstein

This comment has been minimized.

Show comment
Hide comment
@wouterkirstein

wouterkirstein Nov 23, 2016

Hi there, I am trying a lot of approaches to migrate from my current project running on systemJS based on the quick-start to the format of the angular-cli. Do you maybe have some advice?

wouterkirstein commented Nov 23, 2016

Hi there, I am trying a lot of approaches to migrate from my current project running on systemJS based on the quick-start to the format of the angular-cli. Do you maybe have some advice?

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Dec 22, 2016

Member

@wouterkirstein I'd say this:

  • make a new project using ng new
  • copy over the whole app into ./src/
  • configure your main.ts in angular-cli.json (and anything else you see is different)
  • remove any module.id you have in components (not needed)
  • make all html/css paths in components relative

If you still have problems then stack overflow is the best place to ask.

Member

filipesilva commented Dec 22, 2016

@wouterkirstein I'd say this:

  • make a new project using ng new
  • copy over the whole app into ./src/
  • configure your main.ts in angular-cli.json (and anything else you see is different)
  • remove any module.id you have in components (not needed)
  • make all html/css paths in components relative

If you still have problems then stack overflow is the best place to ask.

@wouterkirstein

This comment has been minimized.

Show comment
Hide comment
@wouterkirstein

wouterkirstein Dec 23, 2016

wouterkirstein commented Dec 23, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment