Skip to content
This repository has been archived by the owner on Apr 8, 2020. It is now read-only.

Update to Angular 4.0.0 #800

Closed
ghost opened this issue Mar 25, 2017 · 91 comments
Closed

Update to Angular 4.0.0 #800

ghost opened this issue Mar 25, 2017 · 91 comments

Comments

@ghost
Copy link

ghost commented Mar 25, 2017

Angular 4.0.0 has now been released http://angularjs.blogspot.com.au/2017/03/angular-400-now-available.html with some good improvements
@MarkPieszak
Copy link
Contributor

MarkPieszak commented Mar 25, 2017 •
edited
Loading

Still a few things to work out in the integration, but here's what I have so far with .NET and Angular 4. I've started work in this repo (https://github.com/MarkPieszak/aspnetcore-angular2-universal) for now, but imagine it'll get into here soon enough

@ghost
Copy link
Author

ghost commented Mar 25, 2017

Wow! Thanks @MarkPieszak Wrongly assumed it was essentially a package update, with v2 to v4 meant to be basically non breaking

@MarkPieszak
Copy link
Contributor

Yeah it's quite a bit more, also starting the process differently (now in the Controller) so that we can give .NET the other essential SEO data.

Of course, if you don't care about server rendering, you can just shut it off and update to 4.0 real easily :)

@peterdobson
Copy link

peterdobson commented Mar 25, 2017 •
edited
Loading

Fantastic! Just had to change the port number in fetchdata.components.ts from http://localhost:5000/api/test/users to http://localhost:1780/api/test/users to get the fetch-data sample working.

@MarkPieszak
Copy link
Contributor

Yes so that eventually that'll be set dynamically from the server wth DI, going into Angular, just one of the improvements needed!
URLs must be absolute on the server, previously we patched them for you in Universal.

@skorunka
Copy link

skorunka commented Mar 25, 2017 •
edited
Loading

After upgrading to Ang4 i get this error hile runnign webpack on webpack.config file:

ERROR in [at-loader] ./node_modules/angular2-universal/node_modules/angular2-platform-node/node-platform.d.ts:1:10
    TS2305: Module '"C:/Projects/EYC/Solutions/Anticipate/src/Eyc.Solutions.Anticipate.Ui.Web.2/node_modules/@angular/platform-browser/platform-browser"' has no exported member 'AnimationDriver'.

Any idea? Than kyou.

@MarkPieszak
Copy link
Contributor

You actually can't just update the current project here to Angular4 my apologies. It takes re shifting and removing a lot a lot of things, pull down that branch I pointed to @skorunka and try to port your app to it.

Honestly though I'd suggest waiting a little bit until it's more cleaned up!

@skorunka
Copy link

@MarkPieszak No worries, I understand. Thank you for advice, i will give it a try.

@seven1986
Copy link

seven1986 commented Mar 28, 2017 •
edited
Loading

AOT

@starquake , sorry.
AOT = ahead-of-time https://angular.cn/docs/ts/latest/guide/glossary.html
We all expect officially asp net core angular upgrade to 4.0!

@starquake
Copy link

@seven1986 I'm sorry, what does 'AOT' mean?

@michelebombardi
Copy link

@MarkPieszak Will you let us know here when you've done?

@ns8482e
Copy link

ns8482e commented Mar 28, 2017

@MarkPieszak For angular 4 branch you pointed is still using es6-shim. Is there any plan to update it to core-js?

@MarkPieszak
Copy link
Contributor

Sure, I'll ping everyone when it's all finished. @bm-software
Yes there's a lot that needs to be updated along with core-js, such as AoT etc.

For now that branch is bare bones but sometime in the next few days I'm hoping I can find a good bunch of hours where I can focus on it and get it into Masters with everyone fixed up in it.

@skorunka
Copy link

@MarkPieszak You are our hero!

@ns8482e ns8482e mentioned this issue Mar 29, 2017
Closed
@ghost
Copy link
Author

ghost commented Mar 29, 2017

@starquake , Ahead of time compilation. I'm a noob, but essentially precompiling the entire angular app before even hosting on a server. It increases performance since the angular compiler no longer needs to render the templates. It also offers a feature called tree-shaking that reduces the size of bundles since the UI is rendered during compilation and things not used are not included.

@zihotki
Copy link

zihotki commented Mar 30, 2017

@MarkPieszak do you plan to include angular-cli into the template? If so, are you going to use AoT and other functionality from angular-cli? I'm asking because angular2 template had some custom functionality which is now supported by official angular-cli

@MarkPieszak
Copy link
Contributor

The problem is that because we are trying to do server side pre-rendering, this breaks away from the use-case of the CLI. The CLI is helpful if you just want a normal client side application and your Rest API is a separate all together entity. Here, the goal is to unify them and .NET be aware of the application as well as aid in serializing it to a string (thus giving us the Prerender ability, since that's only available through Node, and Steve created an incredibly easy way to invoke node within .net core)

AoT will definitely be a part of the template as well, I haven't talked with @SteveSandersonMS yet about the plans for having it here as well, but once I clean a few things up i could make a PR to include it Steve?

At the end of the day the only thing we'll be missing compared to the CLI is the generators, but you could write those in just about any scripting language, even something as easy as Gulp if you wanted to write one.

@ghost ghost mentioned this issue Mar 31, 2017
Closed
@michelebombardi
Copy link

I'm trying to rapidly update my vs2015 project to use it with vs2017 but I'm getting the following errors:
nr9we

Is there a quick fix for that? The project structure is the default one with ClientApp folder inside the project root folder

@ADefWebserver ADefWebserver mentioned this issue Mar 31, 2017
Closed
@zihotki
Copy link

zihotki commented Mar 31, 2017

For me actually the most missing feature in JSS is ability to use generators. It's possible to quickly create some custom generators but they will need to be updated to reflect changes in cli, etc. So if it's possible to reuse at least generators parts that would be great even if we will miss such things like 'ng serve'.

@AndeyR
Copy link

AndeyR commented Apr 4, 2017

Any updates ?

@MarkPieszak
Copy link
Contributor

MarkPieszak commented Apr 4, 2017 •
edited
Loading

It's all in here at the moment, I'm working on AoT in a different branch but having some strange issues (might be ngtools related).

It has dev & regular prod builds though, and most other things all work now. You could take it and just drop your /app folder in, don't delete the existing /app folder, as you need browser- & server-app.module files.

Hopefully have even more done today/tomorrow as ngConf starts tomorrow. @AndeyR

@AndeyR
Copy link

AndeyR commented Apr 4, 2017 •
edited
Loading

@MarkPieszak Thank you )

@cspaniard
Copy link

@MarkPieszak great news!!!

Starting a new project soon and I can´t wait to use the new templates for Angular 4

TIA,
David

@ghost ghost mentioned this issue Apr 5, 2017
Closed
@skorunka
Copy link

skorunka commented Apr 5, 2017

@MarkPieszak Hi, could you please be more specific on how to migrate the previous version into this new one? For example, I don't know what to do with "webpack.config.vendor.js". Thank you.

@MarkPieszak
Copy link
Contributor

MarkPieszak commented Apr 5, 2017 •
edited
Loading

I'll have to add those (or some variation of them) back in, I was just keeping things simpler as I was trying to update everything. Getting some small issues with AoT. Takes time to get all this in there & working perfectly.

Honestly I'd wait a little bit unless you want to experience some growing pains as it evolves. Still trying to get a few things working, thankfully there's a few contributors helping with things here and there as well. There's a lot to figure out.

@skorunka
Copy link

skorunka commented Apr 5, 2017 •
edited
Loading

@MarkPieszak I see, I will wait with the upgrade until it is done. Thank you.

@AmrineA
Copy link

AmrineA commented May 19, 2017 •
edited
Loading

@SteveSandersonMS PR #953 has been created with the polyfills to fix this issue in IE.

@MarkPieszak
Copy link
Contributor

Yes those appear in lower IEs unless you have the correct polyfills from core-js. It'd be a good idea to include them (but leave them commented out, as not everyone needs lower than IE11, as it increases bundle size)

@AmrineA
Copy link

AmrineA commented May 19, 2017

@MarkPieszak I get the error in IE 11 on Windows 7. Not sure if it should work without​ them in that browser version or not.

@MarkPieszak
Copy link
Contributor

That's usually the evergreen polyfills that's usually needed, I think you're right!
Too many combinations of things 🙈 Haha

@ADefWebserver
Copy link

Yes those appear in lower IEs unless you have the correct polyfills from core-js. It'd be a good idea to include them (but leave them commented out, as not everyone needs lower than IE11, as it increases bundle size)

In this PR (#952) I am able to make my IE issue go away just by including:

import "core-js/client/shim";

at the top of boot-client.ts. Isn't core-js already included by Angular?

@MarkPieszak
Copy link
Contributor

It's not included, as trimming down package size is important, but adding that client/shim can get it to work yes! More details here: https://angular.io/docs/ts/latest/guide/browser-support.html

@AmrineA
Copy link

AmrineA commented May 19, 2017

I was able to add the client/shim reference and it worked. I also removed all references to core-js and it's still in my node_modules folder after running npm prune. Something must be referencing it and pulling it down as part of the template.

@danobri danobri mentioned this issue May 26, 2017
Closed
@SteveSandersonMS SteveSandersonMS mentioned this issue Jun 3, 2017
Closed
@cbcolleenb
Copy link

Hello, I can't seem to figure this out (how to replace angular2-universal-polyfills/browser with core-js/shim polyfills)? I try to reference core-js/shim in the boot-client.ts but it doesn't recognize it and i find that my core-js folder doesn't have a shim sub-directory. When I try to install lates of core-js it says it's dependent on zone.js but I have the correct zone.js. Please let me know if and how you resolved these things to upgrade to Angular 4.
I get the error "reflect-metadata shim is required when using class decorators" when running.

My boot-client.ts file is as follows:
mport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import "reflect-metadata";
import 'bootstrap';
import { enableProdMode } from '@angular/core';

import "core-js/es6";
enableProdMode();
// Enable either Hot Module Reloading or production mode

// Boot the application, either now or when the DOM content is loaded
const platform = platformBrowserDynamic();
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
bootApplication();
} else {
document.addEventListener('DOMContentLoaded', bootApplication);
}

Thank you, Colleen
-- | --

@AmrineA
Copy link

AmrineA commented Sep 25, 2017

@cbcolleenb I use a separate polyfills.ts file with the following contents.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

import 'zone.js';

I then import that at the very top of the boot-client.ts. I'm wondering if perhaps the order of the imports is causing you issues. Also, what do you have in your webpack.config.vendor.js file?

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@AmrineA
Copy link

AmrineA commented Sep 25, 2017

@cbcolleenb Try the polyfills.ts first and see if that works for you.

@emonney
Copy link

emonney commented Sep 25, 2017 •
edited
Loading

@cbcolleenb Take a look at how I implemented it here: https://github.com/emonney/QuickApp/blob/master/src/QuickApp/ClientApp/boot.browser.ts
Using core.js sim.
The project is based off this repo.

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@AmrineA
Copy link

AmrineA commented Sep 25, 2017 via email

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@AmrineA
Copy link

AmrineA commented Sep 25, 2017 via email

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@AmrineA
Copy link

AmrineA commented Sep 25, 2017

I'm not sure if this helps, but here is my package.json. I wouldn't copy it verbatim or you'll get stuff you don't need and remove things you do.

{
  "name": "appname",
  "version": "1.0.0",
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/node": "^7.0.12",
    "angular2-template-loader": "^0.6.2",
    "aspnet-webpack": "^1.0.17",
    "awesome-typescript-loader": "^3.0.0",
    "core-js": "^2.4.1",
    "css": "^2.2.1",
    "css-loader": "^0.28.0",
    "es6-shim": "^0.35.3",
    "es6-promise": "^4.1.0",
    "event-source-polyfill": "^0.0.9",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "json-loader": "^0.5.4",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "^5.3.0",
    "style-loader": "^0.16.1",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.2.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0",
    "zone.js": "^0.8.5",
    "font-awesome": "^4.7.0",
    "ionicons": "^3.0.0",
    "admin-lte": "^2.3.11"
  }
}

Here is my webpack.config.vendor.js:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: ['.js'] },
        module: {
            rules: [
                { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        entry: {
            vendor: [
                '@angular/common',
                '@angular/compiler',
                '@angular/core',
                '@angular/forms',
                '@angular/http',
                '@angular/platform-browser',
                '@angular/platform-browser-dynamic',
                '@angular/router',
                '@angular/platform-server',
                'admin-lte/bootstrap/css/bootstrap.css',
                'admin-lte/dist/css/AdminLTE.css',
                'admin-lte/dist/css/skins/skin-black.css',
                'core-js',
                'es6-shim',
                'es6-promise',
                'event-source-polyfill',
                'font-awesome/css/font-awesome.css',
                'ionicons/dist/css/ionicons.css',
                //'jquery',
                'zone.js',
            ]
        },
        output: {
            publicPath: '/dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            //new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')),
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    return [clientBundleConfig];
}

Is there a specific browser you're using? Have you tried other browsers?

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@cbcolleenb
Copy link

cbcolleenb commented Sep 25, 2017 via email

@k-krupka
Copy link

k-krupka commented Sep 25, 2017 via email

@cbcolleenb
Copy link

cbcolleenb commented Sep 26, 2017 via email

@AmrineA
Copy link

AmrineA commented Sep 26, 2017

tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "lib": [ "es6", "dom" ],
    "types": [ "node" ]
  },
  "exclude": [ "bin", "node_modules" ],
  "atom": { "rewriteTsconfig": false }
}

boot-client.ts

import './polyfills/polyfills.ts';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const rootElemTagName = 'app'; // Update this if you change your root component selector

// Enable either Hot Module Reloading or production mode
if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector(rootElemTagName);
        const newRootElem = document.createElement(rootElemTagName);
        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
        platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformBrowserDynamic();

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: ['.js', '.ts'] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot-client.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin()
            ])
    });

    return [clientBundleConfig];
};

We don't have a boot-server.ts because we removed server side rendering. You may also notice that some of these files have the pieces removed from them that are required for server side rendering. You should be able to disable SSR to see if that is part of the issue.

@cbcolleenb
Copy link

cbcolleenb commented Sep 26, 2017 via email

@AmrineA
Copy link

AmrineA commented Sep 26, 2017 via email

@cbcolleenb
Copy link

cbcolleenb commented Sep 27, 2017 via email

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests