Upgrading from Angular 2.0.0 to 2.4.0 - Cannot rea

It is created from this tutorial. It is based on Angular 2.0.0.

I want to upgrade the project to Angular 2.4.

What I have done is this-

New `package.json`-

{
  "author": "Abrar Jahin",
  "dependencies": {
    "@angular/common": "^2.4.1",
    "@angular/compiler": "^2.4.1",
    "@angular/core": "^2.4.1",
    "@angular/forms": "^2.4.1",
    "@angular/http": "^2.4.1",
    "@angular/platform-browser": "^2.4.1",
    "@angular/platform-browser-dynamic": "^2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "^3.4.1",
    "@types/node": "^6.0.55",
    "angular2-platform-node": "~2.0.10",
    "angular2-universal": "~2.0.10",
    "angular2-universal-polyfills": "~2.0.10",
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "description": "Angular 2 with ASP.Net Core CRUD App",
  "devDependencies": {
    "aspnet-prerendering": "^1.0.6",
    "aspnet-webpack": "^1.0.11",
    "css": "^2.2.1",
    "css-loader": "^0.26.1",
    "es6-shim": "^0.35.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "^5.0.2",
    "style-loader": "^0.13.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^1.3.3",
    "typescript": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^2.0.0",
    "zone.js": "^0.7.4"
  },
  "license": "MIT",
  "main": "wwwroot/index.html",
  "Name": "Angular2-CRUD",
  "repository": {
    "url": "https://github.com/abrarjahin/Dot.NetCore_Angular2_App"
  },
  "version": "0.0.1"
}

Old `package.json`-

{
  "author": "Abrar Jahin",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/node": "^6.0.55",
    "angular2-platform-node": "~2.0.10",
    "angular2-universal": "~2.0.10",
    "angular2-universal-polyfills": "~2.0.10",
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "description": "Angular 2 with ASP.Net Core CRUD App",
  "devDependencies": {
    "aspnet-prerendering": "^1.0.6",
    "aspnet-webpack": "^1.0.11",
    "css": "^2.2.1",
    "css-loader": "^0.26.1",
    "es6-shim": "^0.35.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "^5.0.2",
    "style-loader": "^0.13.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^1.3.3",
    "typescript": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^2.0.0",
    "zone.js": "^0.7.4"
  },
  "license": "MIT",
  "main": "wwwroot/index.html",
  "Name": "Angular2-CRUD",
  "repository": {
    "url": "https://github.com/abrarjahin/Dot.NetCore_Angular2_App"
  },
  "version": "0.0.1"
}

So, changelog of package.json is-

After doing that, I am getting this error-

Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: Cannot read property 'SelectorMatcher' of undefined
at Object.<anonymous> (D:\ProfileManagement\ProfileManagement\node_modules\angular2-platform-node\__private_imports__.js:21:54)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (D:\ProfileManagement\ProfileManagement\node_modules\angular2-platform-node\node-platform.js:15:28)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)

Can anyone please help me to

Re-

I have followed this post (Upgrading from Angular 2.2.3 to 2.4.0), but it does not work for me.

Rr Re-

Folder PATH listing for volume Code
Volume serial number is 00000200 F64B:849E
D:.
|   boot-client.ts
|   boot-server.ts
|   tsconfig.json
|   
+---app
|   |   app.module.ts
|   |   
|   +---components
|   |   +---app
|   |   |       app.component.css
|   |   |       app.component.html
|   |   |       app.component.ts
|   |   |       
|   |   +---counter
|   |   |       counter.component.html
|   |   |       counter.component.ts
|   |   |       
|   |   +---fetchdata
|   |   |       fetchdata.component.html
|   |   |       fetchdata.component.ts
|   |   |       
|   |   +---home
|   |   |       home.component.html
|   |   |       home.component.ts
|   |   |       
|   |   +---navmenu
|   |   |       navmenu.component.css
|   |   |       navmenu.component.html
|   |   |       navmenu.component.ts
|   |   |       
|   |   +---profile-detail
|   |   |       profileDetail.component.html
|   |   |       profileDetail.component.ts
|   |   |       
|   |   \---profile-list
|   |           profileList.component.css
|   |           profileList.component.html
|   |           profileList.component.ts
|   |           
|   +---dataModel
|   |       Profile.ts
|   |       WeatherForecast.ts
|   |       
|   \---services
|           profile.service.ts
|           
\---dist
        main-server.js
        _placeholder.txt

标签： angular asp.net-core webpack upgrade angular2-upgrade

3条回答

兄弟一词,经得起流年.

2楼-- · 2019-07-29 03:36

Install angular2-universal-patch: npm install angular2-universal-patch --save
Add to your boot-server.ts code row before "import 'zone.js';" but after "import 'angular2-universal-polyfills';": import 'angular2-universal-patch';

Example can be found here: https://github.com/aspnet/JavaScriptServices/blob/dev/templates/Angular2Spa/ClientApp/boot-server.ts

0人赞添加讨论(0) 举报

Animai°情兽

3楼-- · 2019-07-29 03:43

I am supposing you are using Angular2 with ASP.Net Core and webpack because I had this problem when I have using them in angular2 and tried to upgrade.

I have got this error when I have used this 2 things together.

I have a workaround, remove asp-prerender-webpack-config attribute from tag and configure Webpack to output transpiled file to another file with the same name. Be sure you add libraryTarget: 'commonjs2' to webpack config file in order to make it work since it required you export your boot function this way: module.exports. By default webpack doesn't exports anything, you must specify this by yourself. Below the codesnippets required to make it work as it works for me:

clients.jsx

var React = require("react");
var ReactDOMServer = require("react-dom/server");

var Test = React.createClass({
    render: function(){
        return (<h1>Hello!</h1>);
    }
});

module.exports = function (params) {
    return new Promise((resolve, reject) => {
         resolve({
             html: ReactDOMServer.renderToString(<Test />)
        });
    });
}

webpack.config.js

/// <binding ProjectOpened='Watch - Development' />

var webpack = require('webpack');
var path = require('path');

var MODULES = path.resolve(__dirname, "wwwroot/modules");

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: ['node_modules']
    },
    entry: {
        clients: MODULES + "/clients.jsx"
    },
    output: {
        path: MODULES,
        filename: "[name].js",
        libraryTarget: 'commonjs2'
    },
    module: {
        loaders: [
          {
              test: /\.jsx?/,
              include: MODULES,
              loader: 'babel-loader'
          }
        ]
    },
    plugins: [],
    target: "node"
};

Index.cshtml

<div id="clients" asp-prerender-module="wwwroot/modules/clients"
     asp-prerender-data="@Model" ></div>

.babelrc

{
  "presets": [
    "es2015",
    "react"
  ]
}

packages.json

  "devDependencies": {
    "aspnet-prerendering": "^1.0.7",
    "aspnet-webpack": "^1.0.17",
    "aspnet-webpack-react": "^1.0.2",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.2"
  },
  "scripts": {
    "dev": "webpack -d --watch",
    "build": "webpack -p"
  }

So the react components will reside in: ./wwwroot/modules and inside that folder will reside both clients.jsx and clients.js.

0人赞添加讨论(0) 举报

欢心

4楼-- · 2019-07-29 03:46

/*
 * THIS IS TEMPORARY TO PATCH 2.1.1+ Core bugs
 */

/* tslint:disable */
let __compiler__ = require('@angular/compiler');
import { __platform_browser_private__ } from '@angular/platform-browser';
import { __core_private__ } from '@angular/core';
if (!__core_private__['ViewUtils']) {
    __core_private__['ViewUtils'] = __core_private__['view_utils'];
}



if (__compiler__ && __compiler__.SelectorMatcher && __compiler__.CssSelector) {
    (__compiler__).__compiler_private__ = {
        SelectorMatcher: __compiler__.SelectorMatcher,
        CssSelector: __compiler__.CssSelector
    }
}

Copy and paste the above in a new file named "__workaround.browser.ts". `

Then import './__workaround.browser'; in your client.ts or main.ts.

0人赞添加讨论(0) 举报