Zmiany w pakiecie package.json dla migracji od Angula 2 do 4

Question

Obecnie aplikacja działa w wersji Angular 2.0.0. Jakie są pakiety lub zależności, które należy zmienić w celu zapewnienia zgodności z Angular 4? tej pory mam zmieniać następujące,

"dependencies": { 
"@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/router": "4.0.0", 
"@angular/router-deprecated": "2.0.0-rc.2", 
"@angular/upgrade": "4.0.0", 
"angular2-toaster": "2.0.0", 
"rxjs": "^5.0.1", 
"typescript": "^2.1.5", 
"zone.js": "^0.8.4" 
} 

Czy są jakieś inne pakiety/Zależności, które należy zmienić?

Czy należy wprowadzić zmiany w tsconfig.json?

{ 


"compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "lib": [ 
     "es5", 
     "es2015", 
     "es2017", 
     "dom", 
     "scripthost" 
    ], 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "sourceMap": true, 
    "noEmitHelpers": true, 
    "allowNonTsExtensions" : true 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main.d.ts", 
    "typings/main" 
    ], 
    "filesGlob": [ 
    "./src/**/*.ts", 
    "./test/**/*.ts", 
    "!./node_modules/**/*.ts", 
    "src/custom_typings.d.ts", 
    "typings/browser.d.ts" 
    ], 
    "awesomeTypescriptLoaderOptions": { 
    "resolveGlobs": true, 
    "forkChecker": true 
    }, 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "atom": { "rewriteTsconfig": false } 
} 

Answer 1

Nie należy wprowadzać zmian w ts.config. Zmiany, które wprowadziłeś w pliku package.json, wydają się poprawne.

Kilka punktów:

• myślę „maszynopis” powinno być w „devDependencies”, ponieważ nie trzeba będzie, że w trybie prod.
• Polecam usunięcie "^" ze wszystkich zależności b.c. lepiej jest zablokować dokładną wersję
• Gorąco polecam używanie "shrinkwrap", aby uniknąć luźnych zależności w zależnościach.

Aby zainstalować najnowszą wersję Angular, usuń/przenieś bieżący folder node_modules. Następnie:

npm cache clean 
npm install 

Dla porównania, patrz rozdział „Aktualizacja do 4.0.0” http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

Answer 2

normalnie używać plików tu orientacyjna: https://github.com/angular/quickstart

Zapewnia zestaw podstawowych plików nasiennych potrzebne do wniosku i zwykle jest aktualizowany z Angular, ponieważ jest częścią Angular docs at angle.io.

Answer 3

Nie musisz dokonać zmian w pliku package.json ręcznie można uruchomić tego polecenia, jeśli używasz systemu Windows

npm cache clean 

npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save 

Pomoże to

Po skomentować

należy zaktualizować Twój maszynopis, a także może spróbować zmienić to w tsconfig.json

{ 
    "compilerOptions": { 
     "target": "es5", 
     "lib": ["es2016", "dom"] //or es6 instead of es2016(es7) 
    } 
} 

Answer 4

Moje rozwiązanie w takich sytuacjach polega na użyciu polecenia kątowego-cli w celu utworzenia nowego projektu w wymaganej wersji kątowej (prawie zawsze jest to najnowsza wersja dla mnie), a następnie dodania innych zależności, których potrzebuję, umożliwiając menedżerowi pakietów uporządkowanie jaką wersję powinienem mieć lub potwierdzając moją opinię na ten temat za pomocą opcji poleceń menedżera pakietów.

To pozwala mi szybko zbudować bibliotekę dostawców i szybko przetestować, że wszystko zostanie załadowane bezbłędnie za pomocą "aplikacji działa!" projekt, który zapewnia cli.

Po zakończeniu tego procesu powinieneś mieć plik package.json, który możesz po prostu wyciąć i wkleić sekcje zależności w projekcie.

Jeszcze jedna rzecz, na którą należy zwrócić uwagę, jeśli nie ... Przędza. Yarn jest nowszym menedżerem pakietów od naszych znajomych na Facebooku. Jest nowszy, a więc mniej przetestowany niż npm, ale ma kilka naprawdę fajnych funkcji i przynajmniej w moim setupie działa około 20 razy szybciej niż npm. Inny producent wspomniał o shrinkwrap, które jest świetnym narzędziem, więc pomyślałem, że wskażę inne rozwiązanie w tej dziedzinie.

Answer 5

Jest to aplikacja internetowa, która prowadzi cię w (łatwe) procesu modernizacji 2 do 4: https://angular-update-guide.firebaseapp.com/

Answer 6

Oto miły youtube film, który wyjaśnia, jak Migrate Angular 2 to Angular 4

Pozwól mi podsumować to, co powiedział w filmie. Migracja z Angular 2 na Angular 4 to proces trójstopniowy.

1. Usuń stary folder "node_modules", ponieważ ma odniesienia do Angular 2.X.

2. Zmień wszystkie wersje @Angular z wersji 2.X na 4.X i wykonaj "instalację npm".

3. Można uzyskać problemy równorzędne stwierdzające, że ta wersja nie jest zgodna z tą wersją. Popraw to, co mówi o tym błąd. Zobacz wideo, w jaki sposób poprawiono problemy z rówieśnikami.

4. Uruchom projekt i wykonaj dokładny test.